<!DOCTYPE html>
<html>

<head lang='zh'>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
	<title>Luckysheet</title>

	<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
	<link rel='stylesheet' href='./plugins/plugins.css' />
	<link rel='stylesheet' href='./css/luckysheet.css' />
	<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
	<script src="./plugins/js/plugin.js"></script>

	<!-- rollup luckysheet.js -->
	<script src="./luckysheet.umd.js"></script>
	<!-- <script src="./controllers/cellTree.js"></script> -->
	<!-- <script type="text/javascript" src="./plugins/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="./plugins/js/jquery.ztree.core.js"></script> -->

</head>

<body>
	<!-- <div id="btnAaaaaa" style="position:fixed;z-index:9999; right: 20px">保存数据 </div> -->
	<div id="sheetContiner">
		<div id="luckysheetFilling" style="
				margin: 0px;
				padding: 0px;
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0px;
				background-color: #fff;
			"></div>
	</div>
	<!-- <script src="./demoData/sheetEmpty.js"></script> -->

	<script>

		$(function () {
			const options = {
				container: 'luckysheetFilling',
				compType: 'filling', //'filling'
				useCase: 'page',
				lang: 'zh',
				showinfobar: false,
				forceCalculation: false,
				plugins: ['chart'],
				hook: {
					rangeSelect: function (sheet, range) {
						window.selectActive = range
					},
					handleSubmit: function (data, t, del) {
						handleSubmit(data, t, del)
					},
					handleSave: function (data, t, del) {
						handleSave(data, t, del)
					},
					closeFnc: function () {
						closeDrawerFnc()
					},
					rangeDeleteBefore: function(range, data) {
					},
					cellMousedownBefore: function(cell,op) {
						if (op.r === 0) {
							return false
						}
						
					},
					cellUpdateBefore:function(r,c,v) {
						// return false
					}
				},
				// data: [sheetEmpty]
				data: [[{
					"name": "Data Verification",
					"fillingRate": "2",
					"index": "Sheet_7r1WM0ra10ip_1653642243814",
// 					"frozen":{
//    type: 'rangeBoth',
//    range: {row_focus: 2, column_focus: 4}
// }		
				}]]
			}
			options.loading = {
				image: () => {
					return `<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none"></circle>
					</svg>`
				},
				imageClass: "loadingAnimation"
			}
			// 查询数据事件
			try {
				$.ajax({
					url: './demoData/design3.json',
					type: 'get',
					dataTyoe: 'json',
					success: (design) => {
						// let data = [{"xmsyh.ID":"20c9c4c6-aa67-48f2-a7fe-c8c58d85c4ec","xmsyh.DATA_ID":"32bcd15cb622c56e1dcf7215ab719e14","xmsyh.FK_ID ":null,"xmsyh.yxbz":"1","xmsyh.xmlx":"4","xmsyh.xmzlx ":null,"xmsyh.xmkjlbh":"3","xmsyh.sqrq":"2","xmsyh.sfxxxx":"8","xmsyh.sqdxbh":"1"}]
						let data = []
						window.luckysheet.sheetmanage.setCellDataByJson(design[0], data, '', options)
					},
					error: () => {
						window.luckysheet.create(options)
					}
				})
			} catch {
				window.luckysheet.create(options)
			}
		})

		/**
		 * 保存事件
		 * @params {Array} data
		 * @params {string} filling rate type
		 * @params {array} delete id array
		 * */
		function handleSave(data, t, del) {
			console.log(data)
			const params = {
				head: {
					// MODEL_ID: this.lineData.id,
					DATA_TIME: t,
					// ORG_CODE: this.userInfo.orgCode,
					STATUS: '0'
				},
				data: data,
				delList: del
			}
				// window.luckysheet.closeLoading()
			
		}
		function handleSubmit(data, t, del) {
			console.log(data)
		 }
		function closeDrawerFnc() { }
	</script>
	<style>
		/* 自定义loading演示样式 */
		@keyframes loading-rotate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		@keyframes loading-dash {
			0% {
				stroke-dasharray: 1, 200;
				stroke-dashoffset: 0;
			}

			50% {
				stroke-dasharray: 90, 150;
				stroke-dashoffset: -40px;
			}

			100% {
				stroke-dasharray: 90, 150;
				stroke-dashoffset: -120px;
			}
		}

		.loadingAnimation {
			width: 3em;
			height: 3em;
			animation: loading-rotate 2s linear infinite;
		}

		.loadingAnimation circle {
			animation: loading-dash 1.5s ease-in-out infinite;
			stroke-dasharray: 90, 150;
			stroke-dashoffset: 0;
			stroke-width: 2;
			stroke: currentColor;
			stroke-linecap: round;
		}
	</style>
</body>

</html>